<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>登录</title>
<link th:href="@{/ksdH5/css/public/mui/mui.css}" rel="stylesheet"/>
<script th:src="@{/ksdH5/js/public/mui/mui.min.js}"></script>
<script th:src="@{/ksdH5/js/public/jquery.min.js}"></script>
<script th:src="@{/ksdH5/js/public/public.js}"></script>
<link th:href="@{/ksdH5/css/login.css}" rel="stylesheet"/>
</head>
<body>
<div class="mui-content">
	<div class="contBox">
		<a href="javascript:void(0);" class="loginBnt">登录</a>
		<a href="javascript:void(0);" class="registeredBnt">注册</a>
	</div>
</div>
<!--弹窗层-->
<div class="BGbox"></div>
<!--登录-->
<div class="loginBox" onkeydown="keyLogin();">
	<div class="loginBox_closeBnt">
		<a href="javascript:void(0);" class="loginBox_closeBnt_a"><img th:src="@{/ksdH5/img/login/closeBnt.png}" /></a>
	</div>
	<div class="loginBox_title">登录</div>
	<div class="loginBox_contBox">
		<div class="loginBox_contBox_input">
			<input type="tel" maxlength="11" placeholder="请输入手机号"  id="login_phone" />
		</div>
		<div class="loginBox_contBox_input">
			<input type="password" maxlength="16" id="login_password" placeholder="请输入密码" />
		</div>
		<div class="loginBox_contBox_tishi">
			<a href="javascript:void(0);" class="loginBox_contBox_tishi_right">忘记密码?</a>
		</div>
		<button  onclick="doLogin()" id="loginBNT" class="loginBox_contBox_bnt">登录</button>
	</div>
</div>
<!--忘记密码-->
<div class="forgotPassword">
	<div class="loginBox_closeBnt">
		<a href="javascript:void(0);" class="loginBox_closeBnt_a"><img th:src="@{/ksdH5/img/login/closeBnt.png}" /></a>
	</div>
	<div class="loginBox_title">忘记密码</div>
	<div class="loginBox_contBox">
		<div class="loginBox_contBox_input">
			<input  type="tel" maxlength="11" id="forget_phone" placeholder="请输入手机号" />
		</div>
		<div class="loginBox_contBox_input">
			<input  class="forgotPassword_input1" type="tel" maxlength="6" id="forget_code"  placeholder="请输入验证码" />
			<div class="forgotPassword_input2">
				<a class="T-getCode-wjmm" href="javascript:void(0);" onclick="sendForgetCode()">发送验证码</a>
				<span class="T-getCode1-wjmm"></span>
			</div>
		</div>
		<div class="loginBox_contBox_input">
			<input type="password" maxlength="16" id="forget_password1" placeholder="请输入6-16位密码" />
		</div>
		<div class="loginBox_contBox_input">
			<input type="password" maxlength="16" id="forget_password2" placeholder="请确认密码" />
		</div>
		<button class="loginBox_contBox_bnt" onclick="forgetPWD()">确定</button>
	</div>
</div>
<!--注册-->
<div class="registered">
	<div class="loginBox_closeBnt">
		<a href="javascript:void(0);" class="loginBox_closeBnt_a"><img th:src="@{/ksdH5/img/login/closeBnt.png}" /></a>
	</div>
	<div class="loginBox_title">注册</div>
	<div class="loginBox_contBox">
		<div class="loginBox_contBox_input">
			<input  type="tel" maxlength="11" id="register_phone" placeholder="请输入手机号" />
		</div>
		<div class="loginBox_contBox_input">
			<input type="tel" maxlength="6" id="register_code" class="forgotPassword_input1" placeholder="请输入验证码" />
			<div class="forgotPassword_input2">
				<a class="T-getCode"   onclick="sendRegisterCode()" href="javascript:void(0);">发送验证码</a>
				<span class="T-getCode1"></span>
			</div>
		</div>
		<div class="loginBox_contBox_input">
			<input type="password" id="register_password1"    maxlength="16"  placeholder="请输入6-16位密码" />
		</div>
		<div class="loginBox_contBox_input">
			<input type="password" id="register_password2"  maxlength="16" placeholder="请确认密码" />
		</div>
		<div class="loginBox_contBox_input">
			<input  type="tel" maxlength="11" id="register_parent_phone" placeholder="请输入邀请人手机号码" />
		</div>
		<button class="loginBox_contBox_bnt registered_bnt" id="btn_register" onclick="submitRegister()">确定</button>
		<div class="registered_tishi">
			<p>通过点击“注册”，我同意我们的</p>
			<p><a th:href="${#httpServletRequest.getScheme()+'://'+#httpServletRequest.getServerName()+':'+#httpServletRequest.getServerPort()+#httpServletRequest.getContextPath()+'/h5/termsService'}">服务条款</a>。</p>
		</div>
	</div>
</div>
<script type="text/javascript" th:inline="javascript">
	//获得项目根路径
	var ctxPath = [[@{/}]];
</script>
</body>
<script type="text/javascript">
mui.init({
	swipeBack:true
})
$(function(){
	$('.loginBox_contBox_tishi_left').on("click",function(){
		$('.loginBox_contBox_tishi_left').toggleClass('active');
	});  
});
/*登录弹窗JS*/
$(document).on('click','.loginBnt',function(){
	$('.BGbox').show();
	$('.loginBox').show();
	$("#login_phone").val("");
	$("#login_password").val("");
	
	
});
$(document).on('click','.loginBox_closeBnt_a',function(){
	$('.BGbox').hide();
	$('.loginBox').hide();	
	$('.registered').hide();	
	$('.forgotPassword').hide();	
});
/*忘记密码弹窗JS*/
$(document).on('click','.loginBox_contBox_tishi_right',function(){
	$('.BGbox').show();
	$('.forgotPassword').show();
	$('.loginBox').hide();	
});
/*注册弹窗JS*/
$(document).on('click','.registeredBnt',function(){
	$('.BGbox').show();
	$('.registered').show();
});
</script>
<script type="text/javascript">
var prefix=ctxPath+"h5";
//获取短信验证码
$(function(){
    var validCode=true;
    //发送注册验证码
    $(".T-getCode").click (function  () {
    	//判断手机号不为空
    	var register_phone = $.trim($("#register_phone").val());
    	var length = register_phone.length;
    	var phone=/^1[3456789]\d{9}$/;
    	if(length != 11 || !phone.test(register_phone)){
    		mui.toast("手机号格式不正确",{ duration:'long'});
    		$("#register_phone").val("");
    		return;
    	}
    	$.ajax({
    		url :prefix +"/sendCode",
    		dataType : "json",
    		type : "POST",
    		data:{
    			"phone":register_phone
    		},
    		success : function(re) {
    				mui.toast(re.msg,{ duration:'long'});
    		}
    	});
        var time=60;
        var $code=$(this);
        if (validCode) {
            validCode=false;
            var t=setInterval(function  () {
                time--;
                $(".T-getCode").hide();
                $(".T-getCode1").show();
                $(".T-getCode1").html(time+"秒");
                if (time==0) {
                    clearInterval(t);
                    $(".T-getCode").html("重新获取");
		            $(".T-getCode1").hide();
                	$(".T-getCode").show();
                    validCode=true;
                }
            },1000)
        }
    })
    
    
    
    var validCode1 =true;
    //忘记登陆密码
    $(".T-getCode-wjmm").click (function  () {
    	
    	var forget_phone = $.trim($("#forget_phone").val());
    	var length = forget_phone.length;
    	var phone=/^1[3456789]\d{9}$/;
    	if(length != 11 || !phone.test(forget_phone)){
    		mui.toast("手机号填写错误",{ duration:'long'});
    		$("#register_phone").val("");
    		return;
    	} 
    	$.ajax({
    		url : prefix +"/sendCode",
    		dataType : "json",
    		type : "POST",
    		data:{
    			"phone":forget_phone,
    			"type":2 
    		},
    		success : function(re) {
    			if(re.status=="SUCCESS"){
    				mui.toast(re.msg,{ duration:'long'});
    			}else {
    				mui.toast(re.msg,{ duration:'long'});
    			}
    		}
    	});
        var time=60;
        var $code=$(this);
        if (validCode1) {
            validCode1=false;
            var t=setInterval(function  () {
                time--;
                $(".T-getCode-wjmm").hide();
                $(".T-getCode1-wjmm").show();
                $(".T-getCode1-wjmm").html(time+"秒");
                if (time==0) {
                    clearInterval(t);
                    $(".T-getCode-wjmm").html("重新获取");
		            $(".T-getCode1-wjmm").hide();
                	$(".T-getCode-wjmm").show();
                    validCode1=true;
                }
            },1000)
        }
    })
})

function keyLogin(){
	 if (event.keyCode==13){  //回车键的键值为13
	   $("#loginBNT").click(); //调用登录按钮的登录事件
	}
}

//提交注册信息
function submitRegister(){
	var register_phone = $.trim($("#register_phone").val());
	var length = register_phone.length;
	var phone=/^1[3456789]\d{9}$/;
	if(length != 11 || !phone.test(register_phone)){
		mui.toast("手机号填写错误请认真填写",{ duration:'long'});
		$("#register_phone").val("");
		return;
	}
	var register_code = $.trim($("#register_code").val());
	var register_password1 = $.trim($("#register_password1").val());
	var register_password2 = $.trim($("#register_password2").val());
	var passwordLength = register_password1.length;
	if(passwordLength<6||passwordLength>16){
		mui.toast("密码必须在6到16位",{ duration:'long'});
		return;
	}
	if(register_password1 != register_password2){
		mui.toast("两次密码不一致",{ duration:'long'});
		return;
	}
	var register_parent_phone =$.trim($("#register_parent_phone").val());
	var parent_length = register_parent_phone.length;
	if(parent_length != 11 || !phone.test(register_parent_phone)){
		mui.toast("推荐人手机号错误",{ duration:'long'});
		return;
	}
	$.ajax({
		url : prefix +"/register",
		dataType : "json",
		type : "POST",
		data:{
			"phone":register_phone,
			"validate":register_code,
			"password":register_password1,
			"parentPhone":register_parent_phone
		},
		success : function(re) {
			if(re.status=="SUCCESS"){
				mui.toast(re.msg,{ duration:'long'});
				setTimeout(function (){
					window.location.reload();
				}, 3000);
			}else {
				mui.toast(re.msg,{ duration:'long'});
				return;
			}
		}
	});
}

//登陆
function doLogin(){
	var login_phone = $.trim($("#login_phone").val());
	var length = login_phone.length;
	var phone=/^1[3456789]\d{9}$/;
	if(length != 11 || !phone.test(login_phone)){
		mui.toast("账号填写错误请认真填写",{ duration:'long'});
		$("#register_phone").val("");
		return;
	}
	var login_password =$.trim($("#login_password").val());
	var passwordLength = login_password.length;
	if(passwordLength<6||passwordLength>16){
		mui.toast("密码必须在6到16位",{ duration:'long'});
		return;
	}
	//登陆
	$.ajax({
		url : prefix +"/login",
		dataType : "json",
		type : "POST",
		data:{
			"phone":login_phone,
			"password":login_password,
		},
		success : function(re) {
			if(re.status=="SUCCESS"){
				//跳转到index页面
				location.href = prefix + '/index';
			}else {
				mui.toast(re.msg,{ duration:'long'});
			}
		}
	});
}

//忘记密码
function forgetPWD(){
	var forget_phone =$.trim($("#forget_phone").val());
	var length = forget_phone.length;
	var phone=/^1[3456789]\d{9}$/;
	if(length != 11 || !phone.test(forget_phone)){
		mui.toast("手机号填写错误",{ duration:'long'});
		$("#register_phone").val("");
		return;
	} 
	var password1 = $.trim($("#forget_password1").val());
	if(password1.length<6){
		mui.toast("密码不得小于6位",{ duration:'long'});
		return;
	}
	if(password1.length>16){
		mui.toast("密码不得大于16位",{ duration:'long'});
		return;
	}
	var password2 = $.trim($("#forget_password2").val());
	if(password1 != password2){
		mui.toast("两次密码不一致",{ duration:'long'});
		return;
	}
	var validate = $.trim($("#forget_code").val());
	
	
	if(validate.length<4){
		mui.toast("请输入正确的验证码",{ duration:'long'});
		return;
	}
	$.ajax({
		url : prefix +"/forgetPwd",
		dataType : "json",
		type : "POST",
		data:{
			"phone":forget_phone,
			"newPasswd":password1,
			"validate":validate 
		},
		success : function(re) {
			if(re.status=="SUCCESS"){
				mui.toast(re.msg,{ duration:'long'});
				setTimeout(function (){
					location.href= prefix + '/login';
				}, 3000);
			}else {
				mui.toast(re.msg,{ duration:'long'});
			}
		}
	});
}
</script>
</html>
